form design

2022-02-22 · 4 min read

Video: You Suck at Form Design

10 Commandments of Form Design #

1. Align form elements.
2. Place labels above inputs. Avoid labels to the left of inputs.
3. Input labels must stand out.
4. Focused input must stand out.
5. Hard labels rather than placeholders.
6. Errors should go next to exact input.
7. Invalid input fields must stand out.
8. Cramped forms look bad. Use effective whitespace.
9. Avoid wordiness. Move extra info to hovers/dropdowns/etc...
10. Keep num. fields manageable. Either multi-step or group if too many.

Examples #

Alignment #

Before:

1. The form inputs are not aligned with the heading.
2. The form labels are to the left, which makes people's eyes zig-zag.

After:

Clear Input Fields #

Before:

1. The single colored underline is not enough to show that this is an input field. People might mistake them for page breaks.

After:

A subtle background color helps to make form inputs stand out.

Clear Input Focus #

Before:

1. The currently focused input field does not give any indication that the user is inputting into it.

After:

Add a highlight, underline, background color, etc... to show that this field is focused.

Use separate labels #

Before:

1. This input relies on the placeholder to show what the input is for. However, the user might walk away and come back, or just forget what the field is for. Without a separate label that stays untouched, the user can get lost.

After:

Put placeholders outside inputs #

Before:

1. When the user clicks on the input, the placeholder disappears. If the placeholder is conveying any useful information about e.g. formatting, then just put the placeholder outside the input so the user can always see it.

After:

Errors go next to inputs #

Before:

1. All the errors are just dumped at the top or bottom.
2. It's not clear which fields need to be changed.

After:

1. Ensure each error message is as close to the source as possible.
2. Ensure the problem fields are properly highlighted red so the user can quickly identify which fields need to change.

Minimize words. Move help to hovers/dropdowns. #

Before:

1. Lots of words / explanation / supplemental info below the First Name field.

After:

1. Move supplemental info into a hover text or pull-out thing so the actual form is clear.

Use effective whitespace #

Before:

1. Inputs and labels are too cramped. Looks awful.

After:

1. Just a little bit more whitespace makes things much nicer.

Avoid intimidating number of fields #

Before:

1. Too many fields at once can be intimidating. Users will just give up and go elsewhere.

After (1):

1. One option is to split the form into separate steps, so each step looks manageable.

After (2):

1. Another option is to use some whitespace to group different inputs.